<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
    .popover-header {
        padding: 8px 14px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
    .popover-title {
        margin: 0;
        padding: 0;
        background-color: transparent;
        border: none;
    }

    .example-popovers {
        padding: 30px 0;
    }

    .acenter {
        text-align: center;
        margin: 30px 0;
    }
    </style>
</head>
<body>
<div class="example-popovers">
    <div class="acenter">
        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Very long popover header for bootstrap popover that opens on left...">Popover on left</button><div class="popover fade left" style="top: 10.8px; left: 432.133px; display: block;"><div class="arrow"></div><div class="popover-header"><button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button><h3 class="popover-title">Very long popover header for bootstrap popover that opens on left...</h3></div><div class="popover-content">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div></div>
    </div>
    <div class="acenter">
        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on right">Popover on top</button><div class="popover fade top" style="top: 27.6px; left: 629.992px; display: block;"><div class="arrow"></div><div class="popover-header"><button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button><h3 class="popover-title">Popover on right</h3></div><div class="popover-content">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div></div>
    </div>
    <div class="acenter">
        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on bottom">Popover on bottom</button><div class="popover fade bottom in" style="top: 220.8px; left: 629.992px; display: block;"><div class="arrow"></div><div class="popover-header"><button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button><h3 class="popover-title">Popover on bottom</h3></div><div class="popover-content">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div></div>
    </div>
    <div class="acenter">
        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on right">Popover on right</button>
    </div>
</div>

<script src="../scripts/jquery/2.1.3/jquery.js"></script>
<!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
<script>$.fn.extend({
    popoverClosable: function(options) {
        var defaults = {
            template: '<div class="popover">' +
                            '<div class="arrow"></div>' +
                            '<div class="popover-header">' +
                                '<button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button>' +
                                '<h3 class="popover-title"></h3></div>' +
                            '<div class="popover-content"></div>' +
                        '</div>'
        };
        options = $.extend({}, defaults, options);
        var $popover_togglers = this;
        $popover_togglers.popover(options);
        $popover_togglers.on('click', function(e) {
            e.preventDefault();
            $popover_togglers.not(this).popover('hide');
        });
        $('html').on('click', '[data-dismiss="popover"]', function(e) {
            $popover_togglers.popover('hide');
        });
    }
});

</script>
</body>
</html>